<template>
	<view class="page">
		<view class="person_item"> 
			<view class="box" @click="toHimCourse">
				<view class="person_sex iconfont icon-renyuan1"
					:style="{'color': (person.source.sex == '男' ? '#23b8ff':'#EE82EE')}"></view>
				<view class="person_data">
					<view class="person_data_item">
						<text>学院:</text>
						<text>{{college[person.source.collegeId - 1]}}</text>
					</view>
					<view class="person_data_item" style="display:flex">
						<text>班级:</text>
						<view class="person_name" v-if="dataFormate[0].lingheight" v-html="person.highLight.className"></view>
						<text class="person_name" v-if="dataFormate[0].common">{{person.source.className}}</text>
					</view>
					<view class="person_data_item" style="display: flex;align-items: center;letter-spacing: rpx;">
						<text>姓名:</text>
						<view class="person_name"  v-if="dataFormate[1].lingheight" v-html="person.highLight.name"></view>
						<text class="person_name"  v-if="dataFormate[1].common">{{person.source.name}}</text>
					</view>
				</view>
			</view>
			<view class="concern" v-if="concern" @click="setConcern()">
				<view :class="'iconfont icon-shoucang' + isConcern"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			this.itemData = this.person;
			this.myConcern = this.concernData; //对传值进行处理
			// console.log(this.myConcern)
		},
		data() {
			return {
				college: ['城乡建设学院', '动物科技学院', '管理学院', '何香凝艺术设计学院', '化学与化工学院', '机电工程学院', '计算科学学院', '经贸学院', '农业与生物学院',
					'轻工食品学院', '人文与社会科学学院', '外国语学院', '信息科学与技术学院', '园艺园林学院', '资源与环境学院', '自动化学院'
				], //学院
				myConcern: false,
				isConcern: '', //默认样式
				itemData: null,
				dataFormate: [ //控制是否高亮，不能只用一个属性，所以只能分开
					// {
					// 	lingheight: false,
					// 	common: true
					// },
					{
						lingheight: false,
						common: true
					},
					{
						lingheight: false,
						common: true
					}
				]
			}
		},
		watch: {
			myConcern: {
				handler(newValue,oldValue) {
					// console.log('监听变化',newValue)
					if (newValue) {
						this.isConcern = ' isConcern'
					} else {
						this.isConcern = ''
					}
				}
			},
			// myconcernpass: {
			// 	handler(newValue,oldValue) {
			// 		console.log('监听变化',newValue)
			// 		if (newValue) {
			// 			this.isConcern = ' isConcern'
			// 		} else {
			// 			this.isConcern = ''
			// 		}
			// 	}
			// },
			itemData: {
				handler(newValue,oldValue) {
					if (newValue) {
						if (newValue.highLight) {
							// console.log('执行',newValue.highLight);
							let highLightName = '';
							if (newValue.highLight.name) {
							
								highLightName = newValue.highLight.name;
								this.dataFormate[1].lingheight = true;
								// console.log(this.dataFormate[1].lingheight)
								this.dataFormate[1].common = false;
							
							} else if (newValue.highLight.className) {
								highLightName = newValue.highLight.className;

								this.dataFormate[0].lingheight = true;
								this.dataFormate[0].common = false;
								// this.dataFormate[1].common = true;
							}
						}

					}
				}
			}
		},
		props: {
			person: {
				type: Object,
				default () {
					return {};
				}

			},
			lineHeight: {
				type: Boolean,
				default: true
			},
			concern: { //是否显示收藏
				type: Boolean,
				default: false
			},
			concernData: { //收藏的具体值
				type: Boolean,
				default: false
			},
			// myconcernpass: {
			// 	type: Boolean,
			// 	default: false
			// }
		},
		methods: {
			toHimCourse() {
				this.$emit('toHimCourse', this.person.source)
			},
			setConcern() {
				this.myConcern = !this.myConcern;
				// console.log(this.myConcern )
				if (this.myConcern) {
					// console.log('关注')
					this.$emit('setConcern', this.person.source,this.myConcern)
				} else {
					// console.log('取消关注')
					this.$emit('cancelConcern', this.person.source,this.myConcern)
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;

		.person_item {
			width: 90%;
			height: 180rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			background-color: #FFf;
			box-shadow: 0.5rpx 0.5rpx 5rpx #D9D9D9;
			border-radius: 10rpx;

			.box {
				width: 87%;
				display: flex;

				.person_sex {
					margin: 10rpx;
					width: 28%;
					height: 180rpx;
					margin-left: 20rpx;
					border-radius: 50%;
					font-size: 130rpx;
					line-height: 160rpx;
					// color: #;
					text-align: center;
				}

				.person_data {
					width: 72%;
					padding: 6rpx;
					padding-left: 6rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					line-height: 55rpx;
					letter-spacing: 3rpx;

					// color:  	#707070;
					.person_data_item {
						width: 100%;
						white-space: nowrap; //超出隐藏
						overflow: hidden;
						text-overflow: ellipsis;

						&>text:nth-child(1) {
							margin-right: 10rpx;
							font-size: 30rpx;
							// font-weight: 700;
							// color: #707070;
						}

						&>text:nth-child(2) {
							font-size: 28rpx;
							color: #555555;
						}

					}

				}
			}

			.concern {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 13%;
				height: 100%;
				text-align: center;
				line-height: 72rpx;
				.icon-shoucang {
					top: 50%;
					width: 100%;
					height: 72rpx;
					font-size: 54rpx;
					color:  	#C1CDC1;
				}
				.isConcern {
					color:#23b8ff !important;
				}

			}
		}
	}
</style>
